<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import BaseInfo from '@/components/pages/order/service-cost-standard/create/BaseInfo.vue'
  import TableFeeStandardCreate from '@/components/pages/order/service-cost-standard/create/cost-standards/Table.vue'
  import { useFeeStandardDetail } from '@/services/pages/order/service-cost-standard'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'
  import { useActiveTab } from '@/services/pages/order/set'
  import _ from 'lodash'
  import routeComponentName from '@/config/route-component-name'

  const {
    feeStandardDetail,
    getFeeStandardDetailLoading,
    updateFeeStandardDetailLoading,
    getFeeStandardDetail,
    updateFeeStandardDetail,
  } = useFeeStandardDetail()

  defineOptions({
    name: routeComponentName.order.feeStandardForm,
  })

  // 基本信息表单组件实例
  const baseInfoInstance = ref<InstanceType<typeof BaseInfo> | null>(null)

  // 收费标准列表组件实例
  const tableFeeStandardCreateInstance = ref<InstanceType<typeof TableFeeStandardCreate> | null>(
    null,
  )

  // 标签状态管理
  const TagsViewStore = useTagsViewStore()

  // 全局路由对象
  const router = useRouter()

  // 激活路由对象
  const route = useRoute()

  /**
   * 保存事件
   */
  const onSave = _.debounce(async () => {
    if (baseInfoInstance.value && tableFeeStandardCreateInstance.value) {
      const baseInfo = await baseInfoInstance.value.getForm()
      if (!baseInfo) {
        return
      }

      feeStandardDetail.value.name = baseInfo.name
      feeStandardDetail.value.mobileShow = baseInfo.mobileShow

      const list = tableFeeStandardCreateInstance.value.getData()
      if (!list) {
        return
      }

      if (list.length <= 0) {
        HMessageBox.error('请先添加收费标准！')
        return
      }

      if (list.some((o) => !o.name)) {
        HMessageBox.error('请先输入服务项目！')
        return
      }

      feeStandardDetail.value.delFeeStandardInfoIds = []
      feeStandardDetail.value.feeStandardInfoVos.forEach((o) => {
        if (!list.map((o) => o.id).includes(o.id)) {
          feeStandardDetail.value.delFeeStandardInfoIds.push(o.id)
        }
      })

      feeStandardDetail.value.feeStandardInfoVos = list

      const res = await updateFeeStandardDetail()
      if (res) {
        if (res.code === 20000) {
          HMessage.success(infoTip.order.feeStandards.updateFeeStandardSuccess)
          TagsViewStore.delView(route.path)
          useActiveTab().setActiveTab('cost')
          useActiveTab().setFeeCostActiveTab('feeStandards')
          router.push('/busic/base/orderset')
        } else {
          HMessageBox.error(infoTip.order.feeStandards[res.code] || res.message)
        }
      }
    }
  }, 700)
  /**
   * 取消事件
   */
  const onCancel = () => {
    TagsViewStore.delView(route.path)
    useActiveTab().setActiveTab('cost')
    useActiveTab().setFeeCostActiveTab('feeStandards')
    router.push('/busic/base/orderset')
  }

  onMounted(async () => {
    if (route.params.id) {
      await getFeeStandardDetail(route.params.id as string)
      if (baseInfoInstance.value) {
        baseInfoInstance.value.setForm(
          feeStandardDetail.value.name,
          feeStandardDetail.value.mobileShow,
        )
      }
      if (tableFeeStandardCreateInstance.value) {
        tableFeeStandardCreateInstance.value.setData(feeStandardDetail.value.feeStandardInfoVos)
      }
    }
  })
</script>

<template>
  <div class="service-cost-standard-create-wrapper">
    <div
      class="service-cost-standard-create"
      v-loading="getFeeStandardDetailLoading || updateFeeStandardDetailLoading"
      element-loading-text="加载中..."
    >
      <div class="header">
        <div class="title">{{ route.params.id ? '编辑收费标准' : '添加收费标准' }}</div>
      </div>
      <div class="divider"></div>
      <div class="base-info">
        <base-info ref="baseInfoInstance"></base-info>
      </div>
      <div class="cost-standards">
        <div class="table">
          <table-fee-standard-create
            ref="tableFeeStandardCreateInstance"
          ></table-fee-standard-create>
        </div>
        <div class="btn-group">
          <h-button is-modal type="primary" @click="onSave">保存</h-button>
          <h-button is-modal @click="onCancel">取消</h-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .service-cost-standard-create-wrapper {
    height: calc(100vh - 92px);
    box-sizing: border-box;
    padding: 12px;

    .service-cost-standard-create {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 12px;
      display: flex;
      flex-direction: column;

      .header {
        .title {
          font-size: 14px;
          font-weight: bold;
        }
      }

      .divider {
        border-bottom: 1px dotted #e5e5e5;
        margin: 12px 0;
      }

      .header,
      .base-info {
        padding: 0 12px;
        box-sizing: border-box;
      }

      .cost-standards {
        padding: 0 12px;
        margin-top: 24px;
        flex: 1;
        height: 0;
        display: flex;
        flex-direction: column;
        row-gap: 12px;

        .table {
          max-height: calc(100% - 40px);
        }

        .btn-group {
          display: flex;
          column-gap: 10px;
          justify-content: center;
        }
      }
    }
  }
</style>
